<#import "/home/masterTemplate.ftl" as layout />
<#include "/macros/utils.ftl" />
<#import "../macros/spring.ftl" as spring />
<#include "./includes/utils.ftl" />

<#----><#include "/dumps/dump-util.ftl" />

<#assign scriptsObj>
	<#if isMobile()>

	<#else>
		require(["../../js/modules/form", "../../js/exams/detail", "../../js/libs/raphael"], function() {
	</#if>
		base.init();
		base.exams.detail.init();

		$(window).on('orientationchange', function(){
		    base.exams.detail.drawDonut();
		});

		/*IE FIX - Resize*/
		base.exams.detail.onResize();
	<#if !isMobile()>
		});
	</#if>
</#assign>

<#function checkIfSubmitted itemlist item_2>
	<#list itemlist as item>
		<#if item.item.id == item_2.id>
			<#return true />
		</#if>
	</#list>
	<#return false />
</#function>

<#if m_site.m_user.privileges == 1>
	<#assign index = "5"/>
<#else>
	<#assign index = "0" />
</#if>

<@layout.masterTemplate wtSection="exams" wtSubsection="" title="" bodycss="" wrappercss="detail" section="exams" subsection="" pagename="" color="" sectionIdx=index> 
	
		<#--donut device helper-->
		<#if isDesktop()>
		  <#assign device = 'desktop' />
		<#elseif isTablet()>
		  <#assign device = 'tablet' />
		<#else>
		  <#assign device = 'mobile' />
		</#if>
		<input type="hidden" value = "${device}" id="device">

		<#if m_site.m_exam??>
			<@backHeader "Detail" "Account" "Exam#${m_site.m_exam.id}"/> 
		<#else>
			<@backHeader "Detail" "Account" "Exam"/> 
		</#if>

		<#if m_site.m_invalid_exam??>
			<@invalidAlert m_site.m_invalid_exam />
		<#else>
			<div class="summary cf">
				<#if m_site.m_exam??>
					<#assign exam = m_site.m_exam />
					<#assign totalQuestion = exam.questionSize?c/> 
					<div class="page-header">
						<h2>Summary</h2>
					</div>
					<div class="well cf">
						<blockquote>
							<p><strong>Assigned profile: </strong>${exam.profile.title}</p>
							<p><strong>Total questions: </strong>${totalQuestion}</p>
							<p><strong>Won Points: </strong> ${m_site.m_pts_won}</p>
							<p><strong>Lost Points: </strong> ${m_site.m_pts_lost}</p>
							<p><strong>Final Score: </strong> ${exam.score}%
							<span>(
								<#if exam.score gt 69 && exam.pending == false>
									approved
								<#else>
									failed
								</#if>
							)</span>
							</p>
						</blockquote>
						<div class="box">		    
						    <div class="totalScore">
						      <span class="win" data-value="${m_site.m_pts_won?number}">0%</span>
						      <span class="middle">|</span>
						      <span class="lost" data-value="${m_site.m_pts_lost?number}">0%</span>
						    </div>
						    <#--js handler-->
						    <div id="drawDonut">
						    </div>
						</div>
					</div>
				</#if>
			</div>

			<div class="submitted cf">
				<div class="page-header">
					<h2>Submitted questions</h2>
				</div>
				<div class="well">
					<#if m_site.m_questions??>
						<#assign all_questions = getList(m_site.m_questions) />
						<#assign my_answers = getList(exam.examItemsList) />

						<ul class="questions">
						<#list all_questions as question>
							<li class="question">
								<p  class="description">${question.description}</p>
								<ul class="items">
									<#list getList(question.itemsList) as item>
										<li class="<#if item.isCorrect == true>correct</#if> <#if checkIfSubmitted(my_answers, item)> fail</#if>">
											<p class="item">
												${item.description}
												<#if checkIfSubmitted(my_answers, item) >
													<span class="right">selected</span>
												</#if>
											</p>
										</li>
									</#list>
								</ul>
								<label class="related"><strong>Topic related:</strong> ${question.topic.title}</label>
							</li>	
						</#list>
						</ul>
					</#if>
				</div>
			</div>
		</#if>

	
	<#----><@dumper m_site "m_site" false true/>
</@layout.masterTemplate>